<template>
  <div class="live_broadcast">
    <header>
      <span>{{info.name}}直播间</span>
      <span>
        <h4>春季美妆搭配</h4>
      </span>
      <span></span>
    </header>
    <main>
      <div class="left">
        <li>
          <van-icon name="eye" />
          &emsp;当前观看人数:{{info.views}}
        </li>
        <li>
          <van-icon name="manager" />
          &emsp;当前关注人数:{{info.pay}}
        </li>
        <li>
          <van-icon name="thumb-circle" />
          &emsp;当前点赞人数:{{info.give}}
        </li>
        <li>
          <van-icon name="bag" />
          &emsp;当前下单人数:{{info.place}}
        </li>
      </div>
      <div class="right">
        <video id="myVideo" class="video-js">
          <source src="E:\日考作业录屏/day1.mp4" type="video/mp4" />
        </video>
        <div class="right_button">
          <button @click="goback()">返回</button>
          <button>强行关闭</button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      info: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getList();
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    getList() {
      axios({
        url: "/api/detail",
        method: "post",
        data: {
          id: this.id
        }
      }).then(res => {
        this.info = res.data.data;
      });
    },
    goback() {
      this.$router.goback(-1);
    },
     initVideo() {
        //初始化视频方法
        let myPlayer = this.$video(myVideo, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "800px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "400px"
        });
        }
  }
};
</script>

<style scoped>
.live_broadcast {
  width: 1000px;
  height: 650px;
  display: flex;
  flex-direction: column;
  background: #000;
  margin: 0px auto;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 30px;
  background: rgb(58, 57, 57);
  color: #ffffff;
  box-shadow: 1px 2px 6px #757474;
}
h4 {
  color: #ffffff;
  font-weight: bold;
}
main {
  flex: 1;
  display: flex;
  overflow-y: auto;
}
.left {
  width: 200px;
  height: 100%;
  background: #000;
  box-shadow: 1px 2px 6px #757474;
}
.left li {
  color: cornflowerblue;
  text-align: center;
  line-height: 40px;
}
.left li:nth-child(1) {
  margin-top: 40px;
}
.right {
  width: 800px;
  height: 100%;
}
.right img {
  width: 70%;
  height: 80%;
  text-align: center;
  margin: 40px 110px;
}
.right_button {
  margin-left: 150px;
}
.right_button button:nth-child(1) {
  width: 200px;
  height: 40px;
  margin-top: -150px;
  background: rgb(245, 102, 130);
  margin-left: 50px;
  border: none;
}
.right_button button:nth-child(2) {
  width: 200px;
  height: 40px;
  margin-top: -150px;
  background: none;
  color: #ffffff;
  border: 1px solid rgb(245, 102, 130);
  margin-left: 30px;
}
</style>